<template>
  <div class="wrap">
    <div class="item item_1 bg-#e74c3c">1</div>
    <div class="item item_2 bg-#1abc9c">2</div>
    <div class="item item_3 bg-#2ecc71">3</div>
    <div class="item item_4 bg-#3498db">4</div>
    <div class="item item_5 bg-#9b59b6">5</div>
    <div class="item item_6 bg-#34495e">6</div>
    <!-- <div class="item item_7 bg-#16a085">7</div>
    <div class="item item_8 bg-#27ae60">8</div>
    <div class="item item_9 bg-#2980b9">9</div>
    <div class="item item_10 bg-#8e44ad">10</div> -->
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.wrap {
  background-color: #bdc3c7;
  height: 400px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 1fr);
  padding: 20px;
  // row-gap: 20px;
  // column-gap: 20px;
  gap: 20px;
  div {
    border-radius: 20px;
    display: grid;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 20px;
  }
  .item_2 {
    // grid-column-start: 2;
    // grid-column-end: -1;
    // grid-row-start: 1;
    // grid-row-end: 3;

    // grid-column: 2 / -1;
    // grid-row: 1 / 3;

    grid-area: 1 / 2 / 3 / -1;
  }
  .item_3 {
    // grid-row-start: 2;
    // grid-row-end: -1;
    grid-row: 2 / -1;
  }
  .item_5 {
    // grid-row-start: 3;
    // grid-row-end: -1;
    grid-row: 3 / -1;
  }
}
</style>
